<template>
	<w-container id="container" >
		 <w-navbar leftIconColor="#fff" autoBack bgColor="unset"></w-navbar>
		 <view class="content_box">
		 	<view class="flex flex-ai-center flex-js-sb">
				<view class="font-color-white font-size-12">每日{{info.update_time}}更新</view>
				<view @click="show = true" class="flex flex-ai-center">
					<u-icon :name="localBgUrl + 'icon_question.png'"></u-icon>
					<view class="font-color-white font-size-12 ml-2">排行说明</view>
				</view>
		 	</view>
			<u-gap height="15"></u-gap>
			<scroll-view scroll-y="true" style="height: calc(100vh - 300rpx);">
				<w-marketCapRanking :list="list" />
				<w-loading v-if="!loading && !list.length" emptyType="search" emptyTop="200" type="empty"></w-loading>
			</scroll-view>
		 </view>	 
		 <u-modal width="540rpx" :show="show" title="市值排行榜规则" confirmText="知道了" confirmColor="#165DFF" @confirm="show = false">
			 <view class="flex flex-dir-col">
			 	<scroll-view scroll-y="true" style="max-height: 60vh;">
			 		<u-parse :content="handleLang(info.market_desc)"></u-parse>
			 	</scroll-view>
			 </view>
		 </u-modal>
	</w-container>
</template>

<script>
	import { mapState } from "vuex"
	import { localBgUrl } from "@/config/index.js"
	import { ranking } from "@/api/market/index.js"
	export default {
		data() {
			return {
				localBgUrl,
				show:false,
				list:[],
				loading:true
			}
		},
		onLoad() {
			this.getList()
		},
		computed:{
			...mapState('config',['info'])
		},
		methods: {
			  getList(){
				ranking().then( res => {
					this.list = res.data
					this.loading = false
				}).catch( err => {})
			  }
		}
	}
</script>

<style lang="scss" scoped>
	#container {
		background-repeat: no-repeat;
		width: 100%;
		background-size: 100% 328rpx;
		position: relative;
		.content_box {
			padding: 0 32rpx;
			width: 100%;
			position: absolute;
			top: 220rpx;
			left:0;
		}
	}
	/deep/ .u-modal__title {
		@extend .font-color-black,.font-size-16;
	}
</style>
